<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="6">
				<el-input v-model="filterText" style="width: 15vw; margin: 5px" size="mini" placeholder="查询" />
				<el-scrollbar :style="{ 'height': screenHeight - 220 + 'px', }">
					<el-tree 
						default-expand-all
						:data="treeData"
						node-key="id"
						ref="refTree"
						@node-click="onNodeClick"
						:filter-node-method="filterNode"
						highlight-current
						:expand-on-click-node="false"
					/>
				</el-scrollbar>
			</el-col>
			<el-col :span="18">
				<el-button style="float: left; margin: 5px" type="primary" size="mini" @click="onAdd()" plain>新增</el-button>
				<el-table :data="tableData" style="width: 100%">
					<el-table-column prop="name" label="姓名" width="120" />
					<el-table-column prop="userNo" label="登录名" width="120" />
					<el-table-column prop="cardNo" label="身份证号" width="180" />
					<el-table-column prop="roleName" label="角色" width="120" />
					<el-table-column prop="postName" label="职务" width="180" />
					<el-table-column prop="policeNo" label="警号" width="120" />
					<el-table-column prop="phone" label="联系电话" width="120" />
					<el-table-column prop="sex" label="性别" width="70">
						<template #default="scope">{{ scope.row.sex == 1 ? '男' : '女' }} </template>
					</el-table-column>
					<el-table-column prop="organName" label="所属单位" width="180" />
					<el-table-column prop="empStatus" label="人员状态" width="90">
						<template #default="scope">
							<el-tag :type="scope.row.empStatus == 1 ? 'success' : 'danger'" disable-transitions>{{ scope.row.empStatus ? '启用' : '禁用' }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="userStatus" label="用户状态" width="90">
						<template #default="scope">
							<el-tag :type="scope.row.userStatus == 1 ? 'success' : 'danger'" disable-transitions>{{ scope.row.userStatus ? '启用' : '禁用' }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="创建时间" width="180">
						<template #default="scope">{{ dateFormat(scope.row.createTime) }}</template>
					</el-table-column>
					<el-table-column prop="creator" label="创建人" width="180" />
					<el-table-column prop="remark" label="备注" />
					<el-table-column fixed="right" label="操作" width="240">
						<template #default="scope">
							<el-button type="primary" size="mini" @click="onEdit(scope.row.id)">编辑</el-button>
							<el-button type="danger" size="mini" @click="onDelete(scope.row.id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					:page-sizes="[10,20,30,50,100]"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pager.total"
				>
				</el-pagination>
			</el-col>
		</el-row>
		<el-drawer v-model="drawer" title="用户编辑" :size="420" :before-close="handleClose">
			<el-form :model="form" ref="refFm" label-width="100px" size="mini" :show-message="false">
				<el-form-item label="姓名" required prop="name">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-select v-model="form.sex">
						<el-option   label="男" :value="1"> </el-option>
						<el-option   label="女" :value="2"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="警号" required prop="policeNo">
					<el-input v-model="form.policeNo"></el-input>
				</el-form-item>
				<el-form-item label="账号" required prop="userNo">
					<el-input v-model="form.userNo"></el-input>
				</el-form-item>
				<el-form-item label="所属机构" required  prop="orgId">
					<el-select v-model="form.orgId" filterable>
						<el-option v-for="item in organs" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="身份证号">
					<el-input v-model="form.cardNo"></el-input>
				</el-form-item>
				<el-form-item label="职务">
					<el-input v-model="form.postName"></el-input>
				</el-form-item>
				<el-form-item label="联系电话">
					<el-input v-model="form.phone"></el-input>
				</el-form-item>
				<el-form-item label="所属角色">
					<el-select v-model="form.roleId" filterable>
						<el-option v-for="item in roles" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="用户状态">
					<el-select v-model="form.empStatus">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="人员状态"  >
					<el-select  v-model="form.userStatus" >
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit()">保存</el-button>
					<el-button @click="drawer = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-drawer>
	</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, computed, ref, onMounted,watch } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { queryPagers, save, del } from '/@/api/user/index';
import { queryOrgans } from '/@/api/organ/index';
import { queryRoles } from '/@/api/role/index';
import moment from 'moment';
export default defineComponent({
	components: {},
	setup() {
		const form = reactive({
			id: 0,
			orgId: 0,
			userNo: '',
			pwd: '',
			remark: '',
			name: '',
			phone: '',
			sex: 1,
			postName: '',
			policeNo: '',
			empStatus: 1,
			userStatus: 1,
			cardNo: '',
			roleId: 0,
		});
		const state = reactive({
			screenHeight: document.body.clientHeight,
			drawer: false,
			pager: {
				size: 10,
				total: 0,
			},
			treeData: [{}],
			dataTree: [],
			tableData: [],
			filterText:"",
			currentNode:null,
			roles: [],
			organs: [],
		});
		const options = ref([
			{
				value: 1,
				label: '是',
			},
			{
				value: 0,
				label: '否',
			},
		]);
		(async function () {
			await init();
		})();
		async function init() {
			await queryOrgans().then((res: any) => {
				state.treeData = res.data.tree;
				if(state.treeData.length > 0){
					window.setTimeout(function(){
						refTree.value.setCurrentKey(state.treeData[0].id);
						onNodeClick(state.treeData[0]);
					},20);
				}
			});
		}
		function filterNode(value: String, data: any) {
			if (!value) return true;
			return data.label.includes(value);
		}
		function onNodeClick(node: any) {
			state.currentNode = node;
			queryPagers({ PageSize: 1000,orgid:node.id || 0 }).then((res: any) => {
				if (res.success) {
					state.tableData = res.data.data;
					state.pager.total = res.data.totalCount;
				}
			});
		}
		const dateFormat = computed(() => (date: any) => {
			return moment(date).format('YYYY-MM-DD HH:mm:ss');
		});
		const refTree = ref();
		watch(
			() => state.filterText,
			(val) => {
				refTree.value.filter(val);
			}
		);
		async function onAdd() {
			state.drawer = true;
			form.name = '';
			form.id = 0;
			form.orgId = state.currentNode?.id||0;
			form.userNo = '';
			form.pwd = '123456';//密码默认：123456
			form.remark = '';
			form.name = '';
			form.phone = '';
			form.sex = 1;
			form.postName = '';
			form.policeNo = '';
			form.empStatus = 1;
			form.userStatus = 1;
			form.cardNo = '';
			form.roleId = 0;
		}
		const handleClose = (done: () => void) => {
			ElMessageBox.confirm('是否关闭?')
				.then(() => {
					state.drawer = false;
					done();
				})
				.catch(() => {});
		};
		function onEdit(id = 0) {
			state.drawer = true;
			const _data = state.tableData.find((x) => x.id == id);
			form.id = _data.id;
			form.orgId = _data.orgId;
			form.userNo = _data.userNo;
			form.pwd = _data.pwd;
			form.remark = _data.remark;
			form.name = _data.name;
			form.phone = _data.phone;
			form.sex = _data.sex;
			form.postName = _data.postName;
			form.policeNo = _data.policeNo;
			form.empStatus = _data.empStatus;
			form.userStatus = _data.userStatus;
			form.cardNo = _data.cardNo;
			form.roleId = _data.roleId;
		}
		async function onDelete(id) {
			await ElMessageBox.confirm('是否刪除?')
				.then(() => {
					del({
						ids: [id],
					}).then((res: any) => {
						if (res.success) {
							init();
							ElMessage({ message: '操作成功', type: 'success' });
						}
					});
				})
				.catch(() => {});
		}
		async function onSubmit() {
			refFm.value.validate(function(valid){
				if(valid){
					//必填项验证成功
					save(form).then((res: any) => {
						if (res.success) {
							state.drawer = false;
							init();
							ElMessage({ message: '操作成功', type: 'success' });
						}
					});
				}else{
					//必填项验证失败
				}
			})
			
		}
		onMounted(() => {
			Promise.all([queryOrgans({ PageSize: 1000 }), queryRoles({ PageSize: 1000 })]).then((res: any) => {
				const roles = res[1].data.data;
				const organs = res[0].data.data;
				state.roles = roles.map((x) => {
					return {
						value: x.id,
						label: x.name,
					};
				});
				state.organs = organs.map((x) => {
					return {
						value: x.id,
						label: x.name,
					};
				});
			});
		});
		const refFm = ref(null);
		return {
			state,
			dateFormat,
			handleClose,
			onDelete,
			onEdit,
			form,
			refFm,
			onAdd,
			onSubmit,
			options,
			refTree,
			filterNode,
			onNodeClick,
			...toRefs(state),
		};
	},
});
</script>

<style scoped>
.el-form-item,
.el-select,
.el-date-picker {
	width: 100%;
}
</style>